<template>
	<el-card :header="topic.img.title" v-if="topic">
		<template #header>
			<div class="flex-a" style="align-items: center">
				<span>{{ topic.img.title }}</span>
				<el-tooltip class="item" effect="dark" content="如果自动匹配正确，确认后可使用此开关标记" placement="top">
					<div style="display: flex; align-items: center;">
						<span style="margin-right: 5px; font-size: 12px;">确认比对:</span>
						<el-switch
							:value="isOpenSwitch"
							active-color="#13ce66"
							inactive-color="#ff4949"
							:loading="isLoading"
							@click="switchChange"
						>
						</el-switch>
					</div>
				</el-tooltip>
				<div>
					<el-link @click.prevent="showUploadImg = true">上传图片</el-link>
<!--					<el-link @click.prevent="showOrderImg = true">相似图片</el-link>-->
				</div>
			</div>
		</template>
		<el-dialog center title="上传图片" v-model="showUploadImg" width="600px">
			<el-upload class="text-center" drag :action="uploadAction" :on-success="handleUploadSuccess"  :on-error="handleUploadError" :show-file-list="false">
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<template #tip>
					<div class="el-upload__tip">
						只能上传 jpg/png 文件，且不超过 500kb
					</div>
				</template>
			</el-upload>
<!--			<template #footer>-->
<!--				<span class="dialog-footer">-->
<!--					<el-button @click="showUploadImg = false">取 消</el-button>-->
<!--					<el-button type="primary" @click="showUploadImg = false">确 定</el-button>-->
<!--				</span>-->
<!--			</template>-->
		</el-dialog>
<!--		<el-dialog center title="相似图片" v-model="showOrderImg" width="800px">-->
<!--			<div v-infinite-scroll="showOrderImgLoadMethod" style="max-height: 600px; overflow-y:auto; overflow-x: hidden">-->
<!--				<div>-->
<!--					<el-row :gutter="20" v-if="topic.img.key[2].content">-->
<!--						<el-col :span="6" class="mb" v-for="(item, index) in topic.img.key[2].content" :key="index">-->
<!--							<div class="order_img_box"><el-image :src="item.url" :preview-src-list="[item.url]"></el-image></div>-->
<!--							<el-button class="picture_btn" @click="clickPic(item)">选这张</el-button>-->
<!--						</el-col>-->
<!--					</el-row>-->
<!--					<el-empty v-else></el-empty>-->
<!--				</div>-->
<!--			</div>-->
<!--			<template #footer>-->
<!--				<span class="dialog-footer">-->
<!--					<el-button @click="showOrderImg = false">关 闭</el-button>-->
<!--				</span>-->
<!--			</template>-->
<!--		</el-dialog>-->
		<div v-if="topic.img.key[0].content">
			<el-row :gutter="20" type="flex" justify="space-between">
				<el-col :span="12">
					<p class="picture_title">{{ topic.img.key[0].title }}</p>
					<div class="img_box">
						<el-image hide-on-click-modal :src="topic.img.key[0].content" :preview-src-list="[topic.img.key[0].content]"></el-image>
					</div>
				</el-col>
				<el-col :span="12">
					<p class="picture_title">{{ topic.img.key[1].title }}</p>
					<div class="img_box">
						<el-image hide-on-click-modal :src="topic.img.key[1].content" :preview-src-list="[topic.img.key[1].content]"></el-image>
					</div>
				</el-col>
			</el-row>
		</div>
		<el-empty v-else></el-empty>
	</el-card>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
	name: 'laPicture',
	props: ['topic', 'isOpenSwitch', 'isLoading', 'uploadAction'],
	setup (props, context) {
		const showUploadImg = ref(false)
		const showOrderImg = ref(false)
		const showOrderImgLoad = ref(0)
		const clickPic = (item) => {
			context.emit('replacePic', item.url)
		}
		const showOrderImgLoadMethod = () => {
			showOrderImgLoad.value++
		}

		const switchChange = () => {
			context.emit('switchChange')
		}

		const handleUploadSuccess = () => {
			showUploadImg.value = false
			context.emit('uploadSuccess')
		}

		const handleUploadError = () => {
			context.emit('uploadError')
		}

		return {
			switchChange,
			clickPic,
			showOrderImgLoadMethod,
			handleUploadSuccess,
			handleUploadError,
			showOrderImg,
			showUploadImg
		}
	}
})
</script>

<style scoped>
	.picture_title{
		text-align: center;
		padding: 10px 0;
	}
	.picture_btn {
		display: block;
		width: 100%;
		margin: 10px 0;
	}
	.order_img_box{
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 168px;
		height: 168px;
		overflow: hidden;
	}
	.img_box{
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100px;
		overflow: hidden;
	}
</style>
